<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>代码预览</title>
    <div th:replace="common/base"></div>
    <style>
        .yy-textarea {
            margin:0 auto;
            overflow: hidden;
            width: 550px;
            font-size: 14px;
            height: 18px;
            line-height: 24px;
            padding:2px;
        }
        textarea {
            outline: 0 none;
            border-color: rgba(82, 168, 236, 0.8);
            /*box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(1, 1, 1, 0.94);*/
        }
    </style>
</head>
<body>
<div class="layui-tab layui-tab-brief" lay-filter="previewTab">
    <ul class="layui-tab-title" id="previewTabTitle">

    </ul>
    <div class="layui-tab-content" id="previewTabContent">

    </div>
</div>
<div th:replace="common/baseJS"></div>
<script th:inline="none">
    layui.use(['element', 'ab'], function () {
        var $ = layui.jquery,
            element = layui.element,
            ab = layui.ab;
        var tableName = ab.util.request("tableName");
        /* 预览代码 */
        function showPreviewModel(tableName) {
            var loadingIdx = layer.load(2);
            ab.util.submitForm({
                url: "/code/generator/" + tableName+"/1",// 请求地址
                type: "post",// 请求提交方式
                data: {},
                showTips: false,
                success: function (res) {
                    layer.close(loadingIdx)
                    var data = res.data;
                    for (var i = 0; i < data.length; i++) {
                        if (i == 0) {
                            $("#previewTabTitle").append('<li class="layui-this">' + data[i].name + '</li>');
                            $("#previewTabContent").append('<textarea id="preview_' + data[i].name + '" style="width: 100%;" class="yy-textarea layui-code layui-tab-item layui-show">' + data[i].content + '</textarea>');
                            autoTextarea(document.getElementById("preview_" + data[i].name));// 调用
                        } else {
                            $("#previewTabTitle").append('<li>' + data[i].name + '</li>');
                            $("#previewTabContent").append('<textarea id="preview_' + data[i].name + '" style="width: 100%;" class="yy-textarea layui-code layui-tab-item">' + data[i].content + '</textarea>');
                        }

                    }
                    $(window).on("resize", function () {
                        layer.full(previewIdx);
                    });
                },
                error: function () {
                    layer.close(loadingIdx)
                }
            });
        }
        if (!!tableName) { //加载配置
            showPreviewModel(tableName);
        }
        element.on('tab(previewTab)', function(data){
            var text = document.getElementById("preview_" + this.innerHTML);
            autoTextarea(text);// 调用
        });
    });
    /* textarea 高度自适应 */
    var autoTextarea = function (elem, extra, maxHeight) {
        extra = extra || 0;
        var isFirefox = !!document.getBoxObjectFor || 'mozInnerScreenX' in window,
            isOpera = !!window.opera && !!window.opera.toString().indexOf('Opera'),
            addEvent = function (type, callback) {
                elem.addEventListener ?
                    elem.addEventListener(type, callback, false) :
                    elem.attachEvent('on' + type, callback);
            },
            getStyle = elem.currentStyle ? function (name) {
                var val = elem.currentStyle[name];

                if (name === 'height' && val.search(/px/i) !== 1) {
                    var rect = elem.getBoundingClientRect();
                    return rect.bottom - rect.top -
                        parseFloat(getStyle('paddingTop')) -
                        parseFloat(getStyle('paddingBottom')) + 'px';
                };

                return val;
            } : function (name) {
                return getComputedStyle(elem, null)[name];
            },
            minHeight = parseFloat(getStyle('height'));


        elem.style.resize = 'none';

        var change = function () {
            var scrollTop, height,
                padding = 0,
                style = elem.style;

            if (elem._length === elem.value.length) return;
            elem._length = elem.value.length;

            if (!isFirefox && !isOpera) {
                padding = parseInt(getStyle('paddingTop')) + parseInt(getStyle('paddingBottom'));
            };
            scrollTop = document.body.scrollTop || document.documentElement.scrollTop;

            elem.style.height = minHeight + 'px';
            if (elem.scrollHeight > minHeight) {
                if (maxHeight && elem.scrollHeight > maxHeight) {
                    height = maxHeight - padding;
                    style.overflowY = 'auto';
                } else {
                    height = elem.scrollHeight - padding;
                    style.overflowY = 'hidden';
                };
                style.height = height + extra + 'px';
                scrollTop += parseInt(style.height) - elem.currHeight;
                document.body.scrollTop = scrollTop;
                document.documentElement.scrollTop = scrollTop;
                elem.currHeight = parseInt(style.height);
            };
        };

        addEvent('propertychange', change);
        addEvent('input', change);
        addEvent('focus', change);
        change();
    };
</script>

</body>
</html>